<template>
    <div id="home">
        <nav-bar class="nav-bar">
          <div slot="center">欢迎来到对抗路</div>
        </nav-bar>
        <tab-control :titles="['国内','国外','浪漫圣地']"  @tabClick="tabClick" ref="tabControl1" 
         v-show = "isTabFixed" class="tab-control" />
        <scroll class="content" ref="scroll" :probe-type="3" @scroll = "contentScroll" :pull-up-load="true"  @pullingUp="loadMore">
            <home-swiper :banners="banners" ref="hSwiper"  @swiperImageLoad="swiperImageLoad" />
            <feature-view />
            <tab-control :titles="['国内','国外','浪漫圣地']"  @tabClick="tabClick" ref="tabControl2"/>
            <goods-list :goodsList = "goods[currCategory].list" />
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop" />
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import HomeSwiper from './childComps/HomeSwiper'
import TabControl from 'components/content/tabControl/TabControl'
import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import FeatureView from './childComps/FeatureView'

import {getHomeFixation, getHomeCategory} from 'network/home'
import {backTopMixin} from 'common/mixin.js'
import {debounce} from 'common/utils'
export default {
    name: "Home",
    data() {
        return {
            banners:[],
            goods: {
                "1": {
                    name: "国内",
                    page: 0,
                    list: []
                },
                "2": {
                    name: "国外",
                    page: 0,
                    list: []
                },
                "3": {
                    name: "浪漫圣地",
                    page: 0,
                    list: []
                }
            },
            currCategory: 1,
            isTabFixed: false,
            tabOffsetTop: 0,
            saveY: 0,
        }
    },
    components: {
        NavBar,
        HomeSwiper,
        TabControl,
        Scroll,
        GoodsList,
        FeatureView
    },
    mixins: [backTopMixin],
    created() {
        this._getHomeFixation();
        this._getHomeCategory("1");
        this._getHomeCategory("2");
        this._getHomeCategory("3");
    },
    mounted() {
        // 图片加载完的事件监听
        const refresh = debounce(this.$refs.scroll.refresh,500)
        this.$bus.$on('homeItemImageLoad',()=>{
            refresh();
        })
    },
    activated() {
        this.$refs.scroll.scrollTo(0,this.saveY,100)
        this.$refs.scroll.refresh()
    },
    deactivated() {
        this.saveY = this.$refs.scroll.getScrollY()
    },
    methods: {
        // 获取tabControl的OffsetTop
        swiperImageLoad() {
            this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
        },
        // 上拉加载更多
        loadMore(){
            this._getHomeCategory(this.currCategory);
        },
        // 监听scroll滚动的位置
        contentScroll(position) {
            this.listenShowBackTop(position);

            // 决定TabControl是否吸顶
            this.isTabFixed = -position.y > this.tabOffsetTop
        },
        // 点击分类选项
        tabClick(index) {
            switch(index) {
                case 0 : 
                    this.currCategory = 1;
                    break;
                case 1 :
                    this.currCategory = 2;
                    break;
                case 2 :
                    this.currCategory = 3;
                    break; 
            }
            this.$refs.tabControl1.currentIndex = index
            this.$refs.tabControl2.currentIndex = index
        },
        // 获取首页固定数据
        _getHomeFixation() {
            getHomeFixation().then(res => {
                console.info(res);
                this.banners = res.data.banners;
            })
        },
        // 获取首页分类的数据
        _getHomeCategory(category) {
            const page = this.goods[category].page+1
            getHomeCategory(category,page).then(res => {
                console.info(res);
                this.goods[category].list.push(...res.data)
                this.goods[category].page += 1;
                this.$refs.scroll.finishPullUp();
            })
        }
    }
}
</script>

<style scoped>
#home {
        height: 100vh;
    }
.nav-bar {
    position: relative;
    z-index: 9;
    background-color: greenyellow;
    color: #fff;
}
  
    .tab-control {
        position: relative;
        z-index: 9;
    }
  
  .content{
      /* height: 300px; */
      position: absolute;
      top: 44px;
      bottom: 49px;
      left: 0;
      right: 0;
  }
    
</style>